<template>
	<uni-popup ref="popup" type="center">
		<view class="content">
			<view style="padding:50rpx">
				<view style="font-size: 36rpx;font-weight: bold;text-align: center;">取消理由</view>
				<view>
					<input v-model="cancel_remark" class="reason" type="text" placeholder="请输入取消理由">
				</view>
			</view>
			<view class="button-group">
				<view class="button" @click="close">取消</view>
				<view class="button" @click="confirm">确定</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>

export default {
	name: "cancelgoods",
	data() {
		return {
			id: null,
			cancel_remark: ''
		};
	},
	methods: {
		open(id) {
			this.id = id
			this.$refs.popup.open()
		},
		close() {
			this.$emit('closecanle')
			this.$refs.popup.close()
			this.id = null
			this.cancel_remark = ''
		},
		confirm(){
			if(!this.cancel_remark){
				uni.showToast({
					title: '请输入取消理由',
					icon: 'none',
					mask: true
				})
				return
			}
			uni.showModal({
				title: '提示',
				content: '确定取消订单吗？',
				success: async (res) => {
					if (res.confirm) {
						try {
							uni.showLoading({
								title: '加载中',
								mask: true
							})
							await this.$http({
								url: '/api/Wechat/cancel_order',
								data: {
									orderid: this.id,
									cancel_remark:this.cancel_remark
								}
							})
							uni.hideLoading()
							uni.showToast({
								title: '取消成功',
								icon: 'success',
								mask: true
							})
							this.$emit('cancel')
							if(this.$parent.list){
								this.$parent.list.splice(this.$parent.list.findIndex(item=>item.id==this.id),1)
							}
							this.$refs.popup.close()
						} catch {
							uni.hideLoading()
						}
					}
				}
			});
		}
	}
}
</script>

<style scoped>
.content {
	width: 90vw;
	height: 400upx;
	border-radius: 20rpx;
	background-color: white;
}

.reason {
	border: 1px solid rgba(0,0,0,.2);
	height: 70rpx;
	padding: 0 24rpx;
	border-radius: 4rpx;
	margin-top: 60rpx;
}

.button-group{
	display: flex;
	border-top: 1px solid rgba(0,0,0,.2);
	margin-top: 20rpx;
}
.button{
	flex:1;
	text-align: center;
	line-height: 100rpx;
	height: 100rpx;
}
.button:nth-child(1){
	border-right:1px solid rgba(0,0,0,.2);
}
.button:nth-child(2){
	color: #FF8A9B;
}
</style>